<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				background: #eee;
			}
			/* #canvas{background: white;} */
		</style>
	</head>
	<body>
		<canvas id="canvas" width="600" height="600"></canvas>
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas');
			var ctx = canvas.getContext('2d');
			ctx.strokeRect(0,0,600,600)
			ctx.lineWidth=10
			ctx.lineCap='round'
			canvas.onmousedown=function(e){
				var e = e || window.event
				ctx.beginPath();
				ctx.strokeStyle='red'
				ctx.moveTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.clientTop)
				canvas.onmousemove=function(e){
					ctx.lineTo(e.clientX-canvas.offsetLeft,e.clientY-canvas.clientTop)
					ctx.stroke()
				}
				canvas.onmouseup=function(e){
					canvas.onmouseup=canvas.onmousemove=null
				}
			}
			
			
		</script>
	</body>
</html>
